<style scoped="true" lang="less">
    #login {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        background: #f6f6f6;
        padding-top: 50px;
    }
    .cell {
        text-align: center;
         width: 80%;
        input {
            width: 100%;
            border: none;
            background: #f6f6f6;
            color: #555;
            height: 34px;
            padding: 6px 12px;
        }
        .line {
            width: 100%;
            border-bottom: 1px solid #c4c4c4;
            border-left: 1px solid #c4c4c4;
            border-right: 1px solid #c4c4c4;
            height: 12px;
            top: 25px;
        }
        .btn {
            width: 200px;
            background: #fe8233;
            height: 38px;
            border-radius: 5px;
            color: #fff;
        }
        .code-btn {
            width: 95px;
            height: 30px;
            background: #29a097;
            right: 5px;
            bottom: 5px;
            border-radius: 3px;
            &:before {
                position: absolute;
                top: 9px;
                left: -5px;
                content: '';
                width: 0;
                height: 0;
                border-top: solid 6px transparent;
                border-bottom: solid 6px transparent;
                border-right: solid 6px #29a097;
                display: block;
            }
        }
        
    }
    .login {
       margin-top: 50px;
    }
    
</style>
<template>
    <div id="login">
        <div class="phone cell rel">
            <input v-model="username" maxlength="11" class="" type="tel" placeholder="请输入手机号码">
            <p class="line abs"><i v-if="showBtn" class="abs f12 cfff code-btn ifcc">发送验证码</i></p>
        </div>
        <div class="code cell rel mg-top-10">
            <input v-model="code" class="" type="tel" placeholder="请输入验证码">
            <p class="line abs"></p>
        </div>
        <p class="cell login" @click="login">
            <button class="btn">登录</button>
        </p>
    </div>
</template>

<script>
    import md5 from 'js-md5';
    import axios from 'axios'
    export default {
        data() {
            return {
            	// 用户名
                username: '',
                // 验证码
                code: ''
            }
        },
        computed: {
            showBtn() {
            	// 手机号码的正则
                let reg = /^1[3578]\d{9}$/;
                if (reg.test(this.username)) {
                    return true;
                } else {
                    return false;
                }
            }
        },
        methods: {
            getCode() {
                let url = 'https://www.easy-mock.com/mock/5b9624bfe0d1a17c279c8716/films/code';
            },

            login() {
            	if (!this.username) {
            		alert('用户名不能为空');
            		return false;
            	}
            	if (!this.showBtn) {
            		alert('请输入正确的用户名');
            		return false;
            	}
            	if (!this.code) {
            		alert('请输入验证码');
            		return false;
            	}
            	
                let url = 'https://www.easy-mock.com/mock/5b9624bfe0d1a17c279c8716/films/logiin';
                // 解构
                let { username, code } = this;
                let data = {
                    username,
                    // 对密码进行md5加密
                    password: md5(code)
                }
                axios.post(url, data).then(res => {
                    // 判断登录是否成功,等于0是成功
                    if (res.data.status === 0) {
                    	// 解构,从返回的数据里取出name和id
                        let {name, id} = res.data.data;
                        // 修改登录状态,设为true
                        this.$store.commit('isLogin', true);
                        // 把name存到store里
                        this.$store.commit('username', name);
                        // 把id存到store
                        this.$store.commit('userId', id);
                        // 跳转到详情
                        this.$router.push('/account/my');
                    } else {
                    	alert(res.data.msg);
                    }
                }).catch((e) => {
                    alert(e);
                })
            }
        }
    }

</script>
